<template>
    <div class="bigrecord">
        <div class="title">
            <span>{{ $t('language.rechange.record') }}</span>
            <strong @click="store.$patch({ rechange: false })">
                <el-icon color="#fff" size="18">
                    <CloseBold />
                </el-icon>
            </strong>
        </div>
        <dl class="record" v-if="recordinfo.list.length != 0">
            <dd v-for="(item, index) in recordinfo.list" :key="index">
                <p class="time">{{ item.date }}</p>
                <div class="record-item" v-for="child in item.data " :key="child.orderID">
                    <div>
                        <p>{{ $t('language.rechange.orderID') }}: {{ child.orderID }}</p>
                        <i @click="copyToClipboard(child.orderID)">{{ $t('language.rechange.copy') }}</i>
                    </div>
                    <span>{{ $t('language.rechange.RechargeAmount') }}: <strong>{{ child.amount / 100
                            }}R$</strong></span>
                    <div class="status">
                        <strong>{{ child.orderDate }}</strong>
                        <span v-if="child.orderStatus == 0">{{ $t('language.rechange.waitpay') }}</span>
                        <span v-else style="color: #0c730c;">{{ $t('language.rechange.paysuccess') }}</span>
                    </div>
                </div>
            </dd>
        </dl>
        <div class="nodata" v-if="recordinfo.list.length == 0 && !loadingrecord">
            <NuxtImg src="/img/bg4.png" alt="" />
            <p>{{ $t("language.rechange.tips") }}</p>
        </div>

    </div>
</template>

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
import { reactive,shallowRef, ref, nextTick } from "vue";
// import { copyToClipboard } from "../../utils/common";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
//获取充值记录
const store = useStore()
let userinfo = computed(() => store.$state.userinfo)
let record = reactive({
    id: userinfo.value.gameID,
    pageIndex: 1,
    pageSize: 30
})
let recordinfo: any = reactive({
    list: [],
    pageIndex: 1,
    pageSize: 11,
    totalCount: 23
})
let loadingrecord = shallowRef<boolean>(true)
let initData = async () => {
    loadingrecord.value = true
    // ElLoading.service({
    //     lock: true,
    //     background: 'rgba(0, 0, 0, 0.7)',
    //     customClass: 'el-loading'
    // })
    await nextTick()
    useHttpPOST(`/Payment/v1.0/Web/User/Recharge/List`, record)
        .then((res: any) => {
            for (let key in res.data.value.data) {
                recordinfo[key] = res.data.value.data[key];
            }

        }).finally(() => {
            loadingrecord.value = false
            // let time = setInterval(() => {
            //     // ElLoading.service({
            //     //     lock: true,
            //     //     background: 'rgba(0, 0, 0, 0.7)',
            //     //     customClass: 'el-loading'
            //     // }).close()
            //     loadingrecord.value = false
            //     clearInterval(time)
            // }, 500)

        });
}
initData()
// 复制
let copyToClipboard = (text: string | number | null | undefined) => {
  let tmpTextField: any = document.createElement("textarea");
  tmpTextField.textContent = text;
  tmpTextField.setAttribute("style", "position:absolute; right:200%;");
  document.body.appendChild(tmpTextField);
  tmpTextField.select();
  tmpTextField.setSelectionRange(0, 99999); /*For mobile devices*/
  document.execCommand("copy");
  ElMessage({
    message: t("language.commontips.copysuccess"),
    type: "success",
    duration: 1000,
  });
}

</script>

<style scoped lang="scss">
.bigrecord {
    width: 100%;
    height: 100%;
    @include flex(column, flex-start, center);

    .title {
        width: 100%;
        height: 55px;
        @include flex(row, space-between, center);
        background-color: rgb(35, 38, 42);
        padding: 0 16px;

        span {
            color: #b5bac8;
            font-size: 18px;
        }

        strong {
            height: 28px;
            width: 28px;
            border-radius: 16px;
            @include flex(row, center, center);
            border: 2px solid #fff;
            cursor: pointer;
        }
    }

    .record {
        width: 100%;
        flex: 1;
        overflow: auto;

        dd {
            width: 100%;

            >p {
                height: 40px;
                width: 100%;
                padding: 0 16px;
                line-height: 40px;
                font-size: 14px;
                background-color: #40434c;
                color: #b5bac8;
            }

            .record-item {
                padding: 16px;
                cursor: pointer;

                >div {
                    @include flex(row, space-between, center);

                    p {
                        color: #fff;
                        font-size: 14px;
                    }

                    i {
                        font-style: normal;
                        color: #0a906c;
                        font-size: 15px;
                    }
                }

                >span {
                    font-size: 14px;
                    color: #fff;
                    display: block;
                    margin: 6px 0;
                }

                .status {
                    @include flex(row, space-between, center);

                    strong {
                        color: #666;
                        font-weight: normal;
                    }

                    span {
                        font-size: 14px;
                        color: #f9e009;
                    }
                }
            }

            .record-item+.record-item {
                border-top: 1px solid #40434c;
            }
        }

    }

    .nodata {
        width: 100%;
        height: 400px;

        img {
            width: 200px;
        }

        @include flex(column, center, center);

        p {
            font-size: 17px;
            color: #b5bac8;
            margin-top: 50px;
        }
    }
}
</style>